<template>
	<view class="container">
		<u-form :model="formModel" ref="fromRules" labelPosition="top" label-width='200rpx' style='margin-top: 60rpx;'>
			<u-form-item label="提现方式类型" prop="typesName" :required='true' borderBottom @click='typesShow = true'>
				<u-input v-model="formModel.typesName" placeholder='请选择' disabled disabledColor='#FFFFFF' border="none" />
				<u-action-sheet :actions="typeList" @select="selectClick" :show="typesShow" :closeOnClickOverlay='true' :closeOnClickAction="true"></u-action-sheet>
			</u-form-item>
			<u-form-item label="真实姓名" prop="realname" :required='true' borderBottom>
				<u-input v-model="formModel.realname" placeholder='请填写真实姓名' border="none" />
			</u-form-item>
			<u-form-item label="银行卡名称" prop="accountName" :required='true' borderBottom v-if="selectTypeItem.key=='bank'">
				<u-input v-model="formModel.accountName" placeholder='请填写银行卡名称' border="none" />
			</u-form-item>
			<u-form-item label="账号" prop="account" :required='true' borderBottom>
				<u-input v-model="formModel.account" placeholder='请填写账号' border="none"/>
			</u-form-item>
			<u-form-item label="收款码" prop="account" borderBottom v-if="selectTypeItem.key!='bank'">
				<u-button @click='upload' text="上传"></u-button>
			</u-form-item>
			<u-form-item>
				<view class="defaultPayway">
					<view style="margin-top: 40rpx;">
						<text>设为默认收款账户</text><br>
						<text style="font-size: 24rpx;">提醒：每次提现都会默认推荐使用该账户</text>
					</view>
					<u-switch activeColor='#d4a781' v-model="formModel.default"></u-switch>
				</view>
			</u-form-item>
			<image style="height: 400rpx;margin: 30rpx auto;" :src="fileModel.fileUrl" mode="heightFix"></image>
			<u-form-item>
				<view class="handle">
					<jc-button style="margin-bottom: 40rpx;" :width="600" title='保存' @click='submit'></jc-button>
					<jc-button style="margin-bottom: 40rpx;" :width="600" title='删除' @click='deleteAction' v-if="formModel.id"></jc-button>
				</view>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import {payway} from '@/api/payway.js'
	import {uploadFileToService} from '@/common/utils/uploadFile.js'
	export default{
		components:{},
		data() {
			return {
				formModel: {realname:'', accountName: '', account: '', default: false},
				fromRules: {
					types: [{ required: true, message: '请选择类型', trigger: ['change','blur']}],
					realname: [{required: true, message: '请填写真实姓名', trigger: ['change','blur']}],
					accountName: [{required: true, message: '请填写账号名称', trigger: ['change','blur']}],
					account: [{required: true, message: '请填写账号', trigger: ['change','blur']}],
				},
				cityPickerValueDefault: [0, 0, 1],
				typesShow: false,
				selectTypeItem: {},
				typeList: [
					{
						name: '支付宝',
						key: 'ali'
					},{
						name: '微信',
						key: 'wx'
					},{
						name: '银行卡',
						key: 'bank'
					}],
				fileModel: {fileUrl:''}
			}
		},
		onLoad() {
			console.log('paywayInfo', this.$Route.query.paywayInfo)
			if(this.$Route.query.paywayInfo){
				this.formModel = JSON.parse(this.$Route.query.paywayInfo)
				this.fileModel.id = this.formModel.paywayCode
				this.fileModel.fileUrl = this.formModel.paywayUrl
			}
		},
		onReady() {
			this.$refs.fromRules.setRules(this.fromRules)
		},
		methods:{
			upload(){
				uploadFileToService().then(res=>{
					if(res.code==10000){
						this.fileModel.id = res.data.image.id
						this.fileModel.fileUrl = res.data.image.url
					}
				})
			},
			//选择类型
			selectClick(item){
				console.log('item', item)
				this.formModel.typesName = item.name
				this.formModel.types = item.key
				this.typesShow = false
				this.selectTypeItem = item
			},
			//提交表单
			submit() {
				this.formModel.paywayCode = this.fileModel.id
				this.$refs.fromRules.validate().then(res => {
					if(this.formModel.id){
						this.updatePaywayInfo()
					}else{
						this.createPayway()
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			//更新地址信息
			updatePaywayInfo(){
				this.formModel.paywayId = this.formModel.id
				payway.updatePayway(this.formModel).then(res => {
					if(res.data.code == 10000){
						uni.navigateBack();
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						})
					}
				})
			},
			//创建
			createPayway(){
				payway.createPayway(this.formModel).then(res => {
					if(res.data.code == 10000){
						uni.navigateBack();
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				})
			},
			//删除
			deleteAction(){
				this.formModel.paywayIds = [this.formModel.id]
				payway.deletePayway(this.formModel).then(res => {
					if(res.data.code == 10000){
						uni.navigateBack();
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		height: 100vh;
		input{
			padding: 0 20rpx;
			margin-top: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #FFFFFF;
			font-size: 30rpx;
		}
		textarea{
			padding: 0 20rpx;
			width: 670rpx;
			margin-top: 40rpx;
			height: 200rpx;
			background-color: #FFFFFF;
			font-size: 30rpx;
		}
		.handle{
			width: 100%;
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.defaultPayway{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>
